<template>
  <div class="department">
    <pageSearch
      :search-config="searchConfig"
      @query-click="handleQueryClick"
      @reset-click="handleRestClick"
    />
    <pageContent
      ref="contentRef"
      @show-modal="handleCreateClick"
      @edit-modal="haldleEditClick"
      :content-confing="contentConfig"
    >
      <template #fortMatCreateAt="scope">{{ formatUTC(scope.row.createAt) }}</template>
      <template #fortMatUpdateAt="scope">{{ formatUTC(scope.row.updateAt) }}</template>
    </pageContent>
    <pageModal ref="modalRef" :modal-config="modalConfig"></pageModal>
  </div>
</template>

<script setup lang="ts" name="department">
import { ref, computed } from 'vue'

import { formatUTC } from '@/utils/format'

import pageSearch from '@/components/pageSearch/page-search.vue'
import pageContent from '@/components/pageContent/page-content.vue'
import pageModal from '@/components/pageModal/pageModal.vue'

import searchConfig from './config/search.config'
import contentConfig from './config/count.config'
import modalConfig from './config/modal.config'
import useMainStore from '@/store/main/main'

import usePageCount from '@/hooks/usePageConunt'
import usePageModal from '@/hooks/usePageModal'

const { handleQueryClick, handleRestClick, contentRef } = usePageCount()

const { handleCreateClick, haldleEditClick, modalRef } = usePageModal()
</script>

<style scoped>
.department {
  border-radius: 20px;
  overflow: hidden;
}
</style>
